import React, { useRef, useState, useEffect } from 'react';
import { Space, Card, Row, Col, Statistic } from 'antd';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { StatisticCard } from '@ant-design/pro-card';

import { getSupplierList } from '../../inventory/supplier/service'
import { getProviderList } from '../../inventory/provider/service'

import { tongjiOil, tongjiOilHz } from './service'

import type { oilListParams, analysisDataParams } from './data';

const TableList: React.FC = () => {

  const [selectedRows, setSelectedRows] = useState<oilListParams[]>([]);
  const actionRef = useRef<ActionType>();
  const [analysisData, setAnalysisData] = useState<analysisDataParams>();

  useEffect(() => {
    const fetch = async () => {
      const params = {}
      const res = await tongjiOilHz(params)
      res.code === 200 && setAnalysisData(res.data.hz)
    }
    fetch();
  }, [])
  
  const productList: ProColumns[] = [
    {
      title: '货品名称',
      dataIndex: 'product_name',
    },
    {
      title: '货品类型',
      search: false,
      dataIndex: 'product_type',
    },
    {
      title: '供应商',
      hideInTable: true,
      dataIndex: 'provider_id',
      valueType: 'select',
      request: async (params) => {
        const res = await getProviderList({ ...params });
        const data = res.data.list
        return data.map((item) => {
          return {
            label: item.name,
            value: item.id,
          };
        });
      }
    },
    {
      title: '仓库',
      hideInTable: true,
      dataIndex: 'oil_depot_id',
      valueType: 'select',
      request: async (params) => {
        const res = await getSupplierList({ ...params });
        const data = res.data.list
        return data.map((item) => {
          return {
            label: item.name,
            value: item.id,
          };
        });
      }
    },
    {
      title: '利润',
      dataIndex: 'money',
      search: false,
      align: 'right',
      render: (dom, rowData) => {
        return (
          <Statistic
            precision={3}
            valueStyle={{ color: rowData.out_price_all > rowData.in_price_all ? '#52c41a' : '#f00', fontSize: '16px', fontWeight: 500 }}
            value={rowData.money}
          />
        )
      },
      sorter: (a, b) => a.money - b.money,
    },
    {
      title: '入库数量',
      align: 'right',
      dataIndex: 'in_stock',
      search: false,
      sorter: (a, b) => a.in_stock - b.in_stock,
    },
    {
      title: '入库平均单价',
      align: 'right',
      // valueType: 'money',
      dataIndex: 'in_price',
      search: false,
      sorter: (a, b) => a.in_price - b.in_price,
    },
    {
      title: '入库总价值',
      align: 'right',
      // valueType: 'money',
      dataIndex: 'in_price_all',
      search: false,
      render: (dom, rowData) => {
        return (
          <Statistic
            precision={3}
            valueStyle={{ fontSize: '14px' }}
            value={rowData.in_price_all}
          />
        )
      },
      sorter: (a, b) => a.in_price_all - b.in_price_all,
    },
    {
      title: '出库数量',
      align: 'right',
      dataIndex: 'out_stock',
      search: false,
      sorter: (a, b) => a.out_stock - b.out_stock,
    },
    {
      title: '日期',
      dataIndex: 'searchDate',
      hideInTable: true,
      valueType: 'dateRange',
      search: {
        transform: (value: any) => ({ bdate: value[0], edate: value[1] }),
      },
    },
    {
      title: '出库平均单价',
      align: 'right',
      // valueType: 'money',
      dataIndex: 'out_price',
      search: false,
      render: (dom, rowData) => {
        return (
          <Statistic
            precision={3}
            valueStyle={{ fontSize: '14px' }}
            value={rowData.out_price}
          />
        )
      },
      sorter: (a, b) => a.out_price - b.out_price,
    },
    {
      title: '出库总价值',
      align: 'right',
      dataIndex: 'out_price_all',
      search: false,
      render: (dom, rowData) => {
        return (
          <Statistic
            precision={3}
            valueStyle={{ fontSize: '14px' }}
            value={rowData.out_price_all}
          />
        )
      },
      sorter: (a, b) => a.out_price_all - b.out_price_all,
    },
    {
      title: '报损总值',
      align: 'right',
      dataIndex: 'loss_price_all',
      search: false,
      render: (dom, rowData) => {
        return (
          <Statistic
            precision={3}
            valueStyle={{ fontSize: '14px' }}
            value={rowData.loss_price_all}
          />
        )
      },
      sorter: (a, b) => a.loss_price_all - b.loss_price_all,
    },
    {
      title: '报损总量',
      align: 'right',
      dataIndex: 'loss_stock',
      search: false,
      sorter: (a, b) => a.loss_stock - b.loss_stock,
    },
  ]

  return (
    <PageContainer>
      <Card bordered={false} style={{ marginBottom: '15px' }}>
        <Card.Grid hoverable={false} style={{ width: '19%',padding: '10px',}} >
          <StatisticCard
            statistic={{
              title: '总利润',
              precision: 3,
              value: analysisData?.money,
              valueStyle: analysisData?.out_price_all && analysisData?.in_price_all ? { fontWeight: 700, color: analysisData.out_price_all > analysisData.in_price_all ? '#52c41a' : '#f00' } : {},
              // prefix: '¥',
            }}
          />
        </Card.Grid>
        <Card.Grid hoverable={false} style={{ width: '27%', padding: '10px' }} >
          <Row>
            <Col span={24}>
              <StatisticCard
                statistic={{
                  title: '入库总量',
                  value: analysisData?.in_stock,
                  valueStyle: { fontWeight: 700 },
                  status: 'success',
                }}
              />
            </Col>
            <Col span={24}>
              <StatisticCard
                statistic={{
                  // prefix: '¥',
                  status: 'success',
                  title: '入库总值',
                  precision: 3,
                  valueStyle: { fontWeight: 700 },
                  value: analysisData?.in_price_all,
                }}
              />
            </Col>
          </Row>
        </Card.Grid>
        <Card.Grid hoverable={false} style={{ width: '27%', padding: '10px' }} >
          <Row>
            <Col span={24}>
              <StatisticCard
                statistic={{
                  status: 'error',
                  title: '出库总量',
                  valueStyle: { fontWeight: 700 },
                  value: analysisData?.out_stock,
                }}
              />
            </Col>
            <Col span={24}>
              <StatisticCard
                statistic={{
                  status: 'error',
                  title: '出库总值',
                  precision: 3,
                  valueStyle: { fontWeight: 700 },
                  value: analysisData?.out_price_all,
                }}
              />
            </Col>
          </Row>
        </Card.Grid>
        <Card.Grid hoverable={false} style={{ width: '27%', padding: '10px' }} >
          <Row>
            <Col span={24}>
              <StatisticCard
                statistic={{
                  status: 'error',
                  title: '报损总量',
                  valueStyle: { fontWeight: 700 },
                  value: analysisData?.loss_stock,
                }}
              />
            </Col>
            <Col span={24}>
              <StatisticCard
                statistic={{
                  status: 'error',
                  title: '报损总值',
                  precision: 3,
                  valueStyle: { fontWeight: 700 },
                  value: analysisData?.loss_price_all,
                }}
              />
            </Col>
          </Row>
        </Card.Grid>
      </Card>
      <ProTable<oilListParams>
        headerTitle="出入库统计列表"
        loading={false}
        actionRef={actionRef}
        rowKey="product_id"
        bordered={true}
        search={{
          span: 4,
          labelWidth: 'auto',
          resetText: '重置查询',
          searchText: '查询统计',
        }}
        columns={productList}
        pagination={{
          pageSize: 10,
          current: 1
        }}
        rowSelection={{
          onChange: (_, selectedRows) => {
            setSelectedRows(selectedRows);
          },
        }}
        request={async (params) => {
          const dataParams = {
            page: params.current,
            limit: params.pageSize,
            oil_name: params.product_name,
            oil_depot_id: params.oil_depot_id,
            provider_id: params.provider_id,
            bdate: params.bdate,
            edate: params.edate,
          }
          const res = await tongjiOil({ ...dataParams });
          return {
            data: res.data.list,
            success: res.code === 200,
            total: res.data.total,
          };
        }}
      />

      {selectedRows.length > 0 && (
        <FooterToolbar
          extra={
            <Space size="large">
              <div>已选择&nbsp;&nbsp;<a style={{ fontWeight: 600, }}>{selectedRows?.length}</a>&nbsp;&nbsp;项</div>
              <Space>
                利润合计:
                <Statistic
                  precision={3}
                  valueStyle={{fontSize:'14px',fontWeight: 600,color:'#1890ff'}}
                  value={selectedRows?.reduce((pre, item) => pre + Number(item.money)!, 0)}
                />
              </Space>
              <Space>
                入库总量:
                <Statistic
                  valueStyle={{ fontSize: '14px', fontWeight: 600, color: '#1890ff' }}
                  value={selectedRows?.reduce((pre, item) => pre + Number(item.in_stock)!, 0)}
                />
              </Space>
              <Space>
                出库总量:
                <Statistic
                  valueStyle={{ fontSize: '14px', fontWeight: 600, color: '#1890ff' }}
                  value={selectedRows?.reduce((pre, item) => pre + Number(item.out_stock)!, 0)}
                />
              </Space>
              <Space>
                入库总值:
                <Statistic
                  precision={3}
                  valueStyle={{ fontSize: '14px', fontWeight: 600, color: '#1890ff' }}
                  value={selectedRows?.reduce((pre, item) => pre + Number(item.in_price_all)!, 0)}
                />
              </Space>
              <Space>
                出库总值:
                <Statistic
                  precision={3}
                  valueStyle={{ fontSize: '14px', fontWeight: 600, color: '#1890ff' }}
                  value={selectedRows?.reduce((pre, item) => pre + Number(item.out_price_all)!, 0)}
                />
              </Space>
              <Space>
                报损总量:
                <Statistic
                  precision={3}
                  valueStyle={{ fontSize: '14px', fontWeight: 600, color: '#1890ff' }}
                  value={selectedRows?.reduce((pre, item) => pre + Number(item.loss_stock)!, 0)}
                />
              </Space>
              <Space>
                报损总值:
                <Statistic
                  precision={3}
                  valueStyle={{ fontSize: '14px', fontWeight: 600, color: '#1890ff' }}
                  value={selectedRows?.reduce((pre, item) => pre + Number(item.loss_price_all)!, 0)}
                />
              </Space>
            </Space>
          }
        >
        </FooterToolbar>
      )}
    </PageContainer>
  );
};

export default TableList;